
<script setup>
import { ref, onMounted } from 'vue'

const awards = ref([])

onMounted(() => {
  awards.value = [
    { id: 1, title: '国际精品咖啡金奖', product: '火山拿铁', year: '2023' },
    { id: 2, title: '最佳风味奖', product: '冷萃火山冰', year: '2024' },
    { id: 3, title: '年度人气饮品', product: '熔岩摩卡', year: '2025' },
    { id: 4, title: '全球可持续奖', product: '岩盐美式', year: '2023' }
  ]
})
</script>

<template>
  <section class="award-carousel">
    <el-carousel :interval="4000"  height="400px" autoplay arrow="always">
      <el-carousel-item  v-for="award in awards" :key="award.id">
        <div class="carousel-card">
          <div class="icon">🏆</div>
          <div class="award-title">{{ award.title }}</div>
          <div class="award-product">{{ award.product }}</div>
          <div class="award-year">{{ award.year }}</div>
        </div>
      </el-carousel-item>
    </el-carousel>
  </section>
</template>

<style scoped>
.award-carousel {
  width: 1000px;
  margin: 0 auto;
  padding: 40px 20px;
  background: #fefcf9;
  overflow: hidden;
}

.carousel-card {
  background: linear-gradient(145deg, #fefcf9, #f1e7d6);
  border-radius: 16px;
  padding: 30px 40px;
  text-align: center;
  height: 80%;
  box-shadow: 0 8px 24px rgba(255, 168, 88, 0.2);
  transition: transform 0.3s ease;
}

.carousel-card:hover {
  transform: scale(1.03);
}

.icon {
  font-size: 30px;
  margin-bottom: 10px;
}

.award-title {
  font-size: 18px;
  font-weight: bold;
  color: #5b3d1f;
}

.award-product {
  font-size: 15px;
  color: #ff6600;
  margin: 8px 0;
}

.award-year {
  font-size: 13px;
  color: #999;
}
</style>
